<template>
  <div class="m-iselect">
    <span class="name">按省份选择：</span>
    <el-select
      v-model="pvalue"
      placeholder="省份"
    >
      <el-option
        v-for="item of province"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <el-select
      v-model="cvalue"
      :disabled="!city.length"
      placeholder="城市"
      @change="handleCitySelect"
    >
      <el-option
        v-for="item of city"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <el-autocomplete
      v-model="input"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入城市中文或拼音"
      @select="handleSelect"
    />
  </div>
</template>

<script>
import _ from "lodash"

export default {
  data() {
    return {
      province: [],
      pvalue: '',
      city: [],
      cvalue: '',
      input: '',
      cities: []
    }
  },
  watch: {
    async pvalue(newVal) {
      let {status, data: {city}} = await this.$axios.get(`geo/province/${newVal}`)
      if (status === 200) {
        this.city = city.map(item => {
          return {
            value: item.id,
            label: item.name,
            province: item.province
          }
        })
        this.cvalue = ''
      }
    }
  },
  async mounted() {
    let {status, data: {province}} = await this.$axios.get(`/geo/province`)

    if (status === 200) {
      this.province = province.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    }
  },
  methods: {
    querySearchAsync: _.debounce(async function(query, cb) {
      let self = this
      if (self.cities.length) {
        cb(self.cities.filter(item => item.value.indexOf(query) > -1))
      } else {
        let {status, data: {city}} = await self.$axios.get('/geo/city')

        if (status === 200) {
          self.cities = city.map(item => {
            return {value: item.name, province: item.province}
          })

          cb(self.cities.filter(item => item.value.indexOf(query) > -1))
        } else {
          cb([])
        }
      }
    }, 300),
    handleSelect(item) {
      this.$store.dispatch('geo/setPosition', {city: item.value, province: item.province})
      this.$router.push('/')
    },
    handleCitySelect() {
      let newCity = this.city.filter(item => {
        return item.value === this.cvalue
      }).map(item => {
        return {
          city: item.label === '市辖区' ? item.province : item.label,
          province: item.label === '市辖区' ? '市辖区' : item.province
        }
      })[0]
      this.$store.dispatch('geo/setPosition', newCity)
      this.$router.push('/')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .m-iselect
    .province
      cursor pointer
      border-radius 4px
      margin 0 10px 0 20px
    .city
      margin 0 20px 0 10px
      border-radius 4px
      cursor not-allowed
    .label
      margin-left 40px
    .input
      width 220px
      height 40px
      border-radius 4px
      box-sizing border-box
      margin-left 10px
      font-size 14px
      color #666
  .el-row
    padding-bottom 20px
    &::after
      content: ''
      height 1px 
      width 100%
      padding-top 20px
      border-bottom 1px solid #e5e5e5

</style>
